<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="800">
    <defs>
        <linearGradient id="linearGradient1" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="200" y2="0%">
            <stop stop-color="red" offset="0%"></stop>
            <stop stop-color="green" offset="50%" stop-opacity="0"></stop>
            <stop stop-color="black" offset="100%"></stop>
        </linearGradient>

        <linearGradient id="grad" x1="0%" x2="100%" y1="0%" y2="0%" gradientUnits="objectBoundingBox">
            <stop stop-color="red" offset="0%"></stop>
            <stop stop-color="green" offset="50%" stop-opacity="0"></stop>
            <stop stop-color="black" offset="100%"></stop>
        </linearGradient>
    </defs>
    <rect width="200" height="100" fill="none" stroke="url(#grad)"></rect>
    <line x1="0" y1="150" x2="200" y2="150" stroke="url(#linearGradient1)" stroke-width="1"></line>
    <line x1="0" y1="180" x2="200" y2="180" stroke="red" stroke-width="1"></line>
</svg>
</body>
</html>
